Browse Curated Developer Resources on the Best Tools

React

Next.js

TypeScript

JavaScript

Remix

Redux

Supabase

Angular

This course is perfect for those looking for a lightweight alternative to NgRx Store that scales effortlessly.

Tomasz Ducin

course

Scalable Signals Angular Architecture with NGRX Signal Store

Get started with Bootstrap by building a professional landing page.

Lucas Minter

Create Professional Responsive Websites using Bootstrap

Write TypeScript that will keep up with your application as it grows.

Domain Data Modeling using TypeScript Aliases, Brand Types and Value Objects

You’ll learn how to build a dynamic chat application using Fauna Streams and Next.js 14, focusing on the essentials and best practices.

Shadid Haque

Build a Real-time Next.js 14 Chat App with Fauna 

Learn the fundamentals of React Query (a.k.a TanStack Query) by going through the basic API and then implementing search in an employee tracking app.

Simplify State Management with React Query

Learn how the latest JavaScript features can help you improve your codebase.

Learn the Latest ECMAScript Features (ES2024, ES2023, ...)

Compose 3D scenes, models, and animations using familiar Vue components and directives, without having to dive into the complexities of Three.js.


Alvaro Saburido

Create Interactive 3D Experiences with TresJS

Learn everything you need to know to take advantage of signals and be prepared for signal-based components

Modernize State Management in Angular with Signals

Quickly get Supabase running on your machine and keep it in sync with a remote.

Ben Patton

Getting Started with Supabase Local Dev

Create the common types of builds for iOS and Android on EAS. Development builds for local development, Preview builds for internal testing, and Production builds for release.

Kadi Kraman

Build and Deploy React Native Apps with Expo EAS

Quickly develop your pages and components in isolation with Storybook

Michael Chan

A Beginner’s Guide to Storybook 7 with React

Master React Testing Library: Render components, enhance UI querying, optimize testing flow, handle events, & eliminate 'not wrapped in act' warnings.

Daniel Afonso

An Introduction to the React Testing Library

Build full stack applications with AWS CDK powered by TypeScript

Tomasz Łakomy

Full Stack TypeScript with AWS Cloud Development Kit v2

Learn how you can leverage the web platform to build dynamic, modern web apps with Astro while minimizing the JavaScript you send to the client.

Lazar Nikolov

Build a Full Stack Blog with Astro

Jumbotron

Home Page



Discover how to harness the power of Cursor IDE's Composer Agent feature to optimize your code. In this lesson, you'll witness an AI agent doing all the work to generate test suites, implement performance benchmarks, and create optimized function variations - all without writing a single line of code. You'll learn how to validate performance improvements through data-driven benchmarking, ensuring that optimizations are backed by concrete metrics rather than speculation. This hands-on demonstration showcases a groundbreaking approach to automated function development that combines the precision of test-driven development with the efficiency of AI-powered optimization.


Agent-Driven Development in Cursor: Testing, Benchmarking, and Optimizing Functions

This course is aimed for using `zod` effectively in projects based on TypeScript (both browser and node.js). The benefits you gain with this course is not just simply coding, but also understanding when/why/how should you perform runtime validation.

`zod` is the missing piece to TypeScript's capabilities, which can guarantee type-safety only in compile-time.

`zod` can be used whenever the compiler cannot guarantee what happens in runtime. And... it's a very frequent usecase, such as HTTP calls, websockets, etc.

In this course you get quickly up and running by:
1. using `zod` with primitives and objects
2. adapting `zod` quickly to existing projects thanks to automatic generators
3. changing the strategy frm type-first to schema-first
4. using error-throwing `parse` or non-error-throwing `safeParse` basing on your needs
5. applying `zod` to the most common usecase - validating API responses
6. handling errors the most convenient way (out of many!)

Take advantage of runtime validation with `zod`. Take advantage of the detailed lessons in this course 🔥

Effective Runtime Type Checks with Zod


Cursor can now automatically run commands in the terminal and walk step-by-step towards building out your entire project. You give it a goal, then it will suggest the commands you need to run and the files that you need to create and you can work with it to achieve what you're building. This lesson does a quick walkthough of using a Cursor Agent to build a project from scratch and guide it along the way. Cursor Agents definitely feel like a sneak peek at the future of programming!

Cursor Agents Initial Impressions - Allow an AI to Build Your Entire Project

Mock Service Worker is an API mocking library that allows you to write client-agnostic mocks and reuse them across any frameworks, tools, and environments.



Mocking WebSocket APIs with Mock Service Worker


While using anonymous functions might seem convenient, they can create difficulties when trying to identify performance bottlenecks during profiling. This lesson will demonstrate how named functions make it easier to pinpoint and address performance issues, ultimately leading to more efficient and debuggable code. Learning this practice will greatly improve your ability to locate and fix performance issues in complex projects.

Always Name Functions in JavaScript


When attempting to load the same module twice in JavaScript you'll hit a cache and code won't re-run. In scenarios where you actually do want to have state in your modules, you'll have to use a cache-busting technique by passing a query parameter to a dynamic import. This lesson walks through how to add a query parameter, how to add the appropriate types for loading dynamic modules in TypeScript, and when these techniques are valuable.

Import the Same JavaScript Module Multiple Times with Cache Busting



The include keyword in GitHub Actions empowers you to add custom variables to your matrix strategy, providing flexibility beyond standard configurations. In this video, we'll explore how include allows you to define specific combinations of variables, enhancing control over your workflow runs. You'll see how this feature enables you to tailor jobs for unique environments or scenarios not covered by the default matrix options. By leveraging include, you can efficiently manage complex build processes with greater precision. This technique helps you streamline your CI/CD pipeline, making it more adaptable to your project's evolving needs.

Use GitHub Actions Matrix Include for Complex Job Configurations

While running `zod` schema validation agains domain-rich objects, the error message saying that _a string is not a number_ might not be really useful.

Especially, when you need to provide a meaningful feeback to the user, e.g. after they have submitted a form with lots of data.

`zod` allows to customize messages on a very granular level. We can also extract repeatable customization to `zod` error maps.

Finally, in order to process an error message further (e.g. display it to the user), we need to handle the `zod` validation errors effectively. Especially, when a big object validation has failed and we could receive a handful of errors.

That's what we learn in this lesson. 🔥

Customize zod Error Messages and Handle zod Errors Effectively

customize zod validation messages, customize zod schema property messages, reuse error maps across different schemas, navigate through zod error objects

You might want to run `zod` schema checks in different styles.

Sometimes you prefer to conditionally throw the error - that's what `parse` does. But another time you'd prefer to receive a `boolean` property that determines whether the validation was successful or not - and perform further actions accordingly.

Additionally, the error-throwing API of `parse` works extremely well with [TypeScript assertion functions](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html#assertion-functions). Their combination is just... perfect! 👌

That's what we learn in this lesson.

Use parse and safeParse Runtime Type-checks with zod

use zod parse function to conditionally throw ZodError, use zod safeParse to get a boolean value and run typescript type guard over success property

In this lesson we learn that TypeScript cannot guarantee correct shapes of responses. That's due to TS performing checks in compile-time, while the response will be availbale in runtime - when TS doesn't exist anymore.

In some situations, such as HTTP requests, runtime type checks such as `zod` are essential for providing quick feedback around data-related errors.

Understand where are the possible mistakes to make while using TypeScript with HTTP calls. Use `fetch` and `axios` along with `zod` schema checks.

Also, note that similar mistakes or mistakes could happen while using web storage (e.g. `localStorage`)

Validate HTTP API Response with zod, fetch and axios

use zod as an HTTP response validation tool along with fetch and axios in order to make sure that the response has expected data structure

In this lesson we learn that the `zod` schemas become the single source of truth.

We shall not update TypeScript types manually, since they are generated automatically from the schema.

Same with validation functions.

Whenever the schema changes, all the rest will update accordingly. It's an important mind shift.

Treat zod Schemas as Single Source of Truth

Zod Schemas are the single source of truth for both typescript types, and interfaces - and runtime validation functions. Schemas should be updated first.

`zod` is powerful, but writing the schemas manually for existing JSON objects, especially big ones, can be time-consuming.

But that's what `quicktype` is for! You can get 80% work done instantly! 🥳

Depending on your need - whether you want to automate the process, or do it just one time, you can:
- use an online app
- use an IDE extension
- run a CLI script
- generate a script to be executed within CI/CD environment/tooling

And this is what we learn in this lesson! 🔥🔥🔥

Get started with zod quickly!

Generate zod Schemas Automatically using Quicktype App, Extensions and Scripts

Use quicktype app, extension or scripts to automatically generate zod schemas from existing json files. Save time and get started with zod quickly!

`zod` is a powerful library allowing to run runtime type-checks.

It's complementary to TypeScript, which does type checks in compile time.

In this lesson we create few schemas that represent primitive type values, along with `zod` utilities which make these more precise. We also create object schemas and nest one inside another.

All schemas are being validated against example values. We analyze how to interpret error messages in case of failures.

Perform Runtime Type-checks on Primitives and Objects with zod

Create zod schemas to validate primitive type and object type values in runtime. Analyze the errors to see how a value doesn't correspond to schema expectations

In tests, mocking gives us a way to reproduce different network-related scenarios. Like in this lesson, we will create a runtime event handler for our WebSocket client messages to test a scenario when another user responds to a sent message in the chat.

## Resources

- [`server.use()` API](https://mswjs.io/docs/api/setup-server/use)


Override WebSocket Event Handling in Tests with MSW

Override WebSocket event handling on a per-test basis in Vitest using Mock Service Worker.

Let's write an end-to-end test for our chat application using Playwright. For this one, we will reuse the browser integration of Mock Service Worker to also run during the automated test.

## Resources

- [Playwright](https://playwright.dev/)


Test WebSockets in Playwright with MSW

Write an end-to-end (E2E) test for a WebSocket application in Playwright using Mock Service Worker.

Let's write an integration test for our `<Chat/>` component in Vitest and React Testing Library. 

The WebSocket interception in MSW requires a global `WebSocket` class. You are covered if you're using Node.js v22 or higher since that global class exists there. But for older versions, we will create a custom Vitest environment to polyfill it using `undici`.

## Resources

- [Vitest](https://vitest.dev/)
- [Undici](https://github.com/nodejs/undici)
- [Testing Library](https://testing-library.com/)


Test WebSockets in Vitest with MSW

Write an integration test for a WebSocket component in Vitest and React Testing Library (RTL) using Mock Service Worker.

When mocking a WebSocket connection in the browser, MSW takes charge of logging WebSocket events in the console. In this one, we explore the different log types and learn how to read the log output of your WebSocket links.

## Resources

- [WebSocket logging](https://mswjs.io/docs/basics/handling-websocket-events#logging)


Understand WebSocket Logs in MSW

Read the WebSocket logging in the browser when mocking APIs with Mock Service Worker.

Mocking WebSocket APIs resembles how you use them in the actual code. This means that you can control the event flow for your client and server events as you normally would when using `EventTarget`. Let's explore how to use `event.stopPropagation()` and `event.stopImmediatePropagation()` to achieve behavior layering when mocking WebSocket events. 

## Resources

- [WebSocket event flow](https://mswjs.io/docs/basics/handling-websocket-events#event-flow)


Prevent WebSocket Event Propagation Between Listeners with MSW

Control WebSocket event propagation between different listeners with Mock Service Worker.

Sicne we're involving an actual WebSocket server in our mock, what happens if that server disconnects? Well, the client connection will close, which is a bummer. Let's see how to listen and prevent original server's `close` event, and also conditionally fallback to MSW to act as the server if that happens.

## Resources

- [`server.addEventListener()`](https://mswjs.io/docs/api/ws#addeventlistenerevent-listener-options-1)


Prevent WebSocket Server Close Event with MSW

Prevent original WebSocket server closures with Mock Service Worker.

The WebSocket client events are also being forwarded to the original WebSocket server since we've called `server.connect()`. Luckily, to opt-out from this forwarding we have to do just the same—call `event.preventDefault()` on any client event we don't want to be forwarded to the server.

## Resources

- [WebSocket client-to-server forwarding](https://mswjs.io/docs/basics/handling-websocket-events#client-to-server-forwarding)


Send Mocked WebSocket Client Messages to the Original Server with MSW

Send mocked WebSocket client messages to the original WebSocket server using Mock Service Worker.

By default, once we establish the actual WebSocket server connection in the mock, all the server events will be forwarded to the client. You can opt-out from this default behavior by calling `event.preventDefault()` on any intercepted server event.

## Resources

- [WebSocket server-to-client forwarding](https://mswjs.io/docs/basics/handling-websocket-events#server-to-client-forwarding)


Prevent Server-to-client Message Forwarding in MSW

Prevent the default forwarding of the original WebSocket server events in mocks with Mock Service Worker.

Now that we have the connection to the actual WebSocket server established, we can listen to any events sent from the server to the client. The thing is, our event handler in MSW will receive those events before the client does.

## Resources

- [Intercepting WebSocket server events](https://mswjs.io/docs/basics/handling-websocket-events#intercepting-server-events)


Intercept WebSocket Server Events with MSW

Listen to the actual WebSocket server events using Mock Service Worker.

Event handlers in MSW represent a WebSocket server. And it so happened a single server may manage a communication across multiple clients. Let's see how we can close multiple WebSocket client connections at once!

We can get access to the set of all connected WebSocket clients in the `chat.clients` property. From then, it's a matter of iterating over them and calling `client.close()` on individual clients.

## Resources

- [`.clients`](https://mswjs.io/docs/api/ws#clients)
- [`client.close()` API](https://mswjs.io/docs/api/ws#closecode-reason)


Close Multiple WebSocket Clients with MSW

Close multiple connected WebSocket clients at once using Mock Service Worker.

Bite-Sized Screencasts for Web Developers that Hate Long Boring Videos